<template>
	<view class="container">
		<view class="header"><wui-tabs :tabs="tabs" :itemWidth="itemWidth" :currentTab="currentTab" @change="change"
				:bold="true"></wui-tabs>
			<order-list v-bind:orders='orders'></order-list>
			<view class="isOver" v-if="flag">------我是有底线的------</view>

		</view>

	</view>
</template>

<script>
	import wuiTabs from '@/components/wui-tabs/wui-tabs';
	import orders from '@/components/order-list/order-list.vue'
	import ajax from '@/api/api.js'
	import url from '@/api/url.js'
	export default {
		components: {
			wuiTabs,
			"orders-list": orders
		},
		data() {
			return {
				currentTab: 0,
				itemWidth: '33.3%',
				tabs: [{
						name: '待支付'
					},
					{
						name: '已支付'
					},
					{
						name: '全部订单'
					}
				],
				orders: [],
				flag: false,
				type: 1, //1:待支付 2:已支付 3:全部
				page: 1
			}
		},
		methods: {
			change(e) {

				this.currentTab = e.index;
				this.type = e.index + 1
				this.orders = []
				this.getOrderData(e.index + 1)
			},

			//传入选择的索引
			getOrderData(type_index) {
				this.$londing()
				console.log(this.page)
				ajax(url.orderList, {
					data: {
						page: this.page,
						type: type_index,
						is_page: 1

					}
				}).then(res => {
					console.log(res)
					// this.orders = [...this.orders, ...res.data.data]
					this.orders = res.data.data
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onLoad() {
			this.getOrderData(this.type)
		},
		//监听用户下拉动作
		onPullDownRefresh() {
			console.log('下拉刷新')
			this.page = 1
			this.flag = false
			this.orders = []

			setTimeout(() => {
				this.getOrderData(this.type)
			}, 1000)
			console.log('停止刷新')
			//停止刷新
			uni.stopPullDownRefresh()
		},
		//监听触底
		onReachBottom() {
			console.log('触底了')
			console.log(this.orders.length)
			//如果返回的数据小于0 就代表没有数据了
			// if (this.orders.length <= this.page * 50) return this.flag = true
			// this.page = this.page + 1
			if (this.orders.length < this.page * 50) return this.flag = true
			this.page++
			console.log(this.page)
			this.getOrderData(this.type)
		}


	}
</script>

<style lang="scss">
	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
	}
</style>